window.addEventListener('load', function() {

    // setTimeout to simulate the delay from a real page load
    setTimeout(lazyLoad, 1000);

});

    function lazyLoad() {
        let card_images = document.querySelectorAll('.card-image');

        // loop over each card image
        card_images.forEach(function(card_image) {
        let image_url = card_image.getAttribute('data-image-full');
        let content_image = card_image.querySelector('img');


        content_image.src = image_url;


        content_image.addEventListener('load', function() {
        // swap out the visible background image with the new fully downloaded photo
        card_image.style.backgroundImage = 'url(' + image_url + ')';
        // add a class to remove the blur filter to smoothly transition the image change
        card_image.className = card_image.className + ' is-loaded';
    });

    });

    }


document.addEventListener("DOMContentLoaded", function () {
    // 获取图片列表并显示
    fetchImageList();
    let createButton = document.querySelector(".card-description .newcard");

    createButton.addEventListener("click", function (event) {
        event.preventDefault(); // 阻止默认链接行为

        // 创建一个用于上传图片的 input 元素
        let fileInput = document.createElement("input");
        fileInput.type = "file";
        fileInput.accept = "image/*";

        // 监听文件选择事件
        fileInput.addEventListener("change", function (event) {
            let selectedFile = event.target.files[0];

            // 如果用户选择了文件，则显示它
            if (selectedFile) {
                let reader = new FileReader();

                reader.addEventListener("load", function (event) {
                    let imageUrl = event.target.result;

                    // 创建 FormData 对象
                    let formData = new FormData();
                    formData.append("image", selectedFile); // "image" 是后端预期的文件字段名

                    // 创建一个新的 XMLHttpRequest 对象
                    let xhr = new XMLHttpRequest();

                    // 配置请求
                    xhr.open("POST", "/uploadPhoto", true);

                    // 监听请求完成事件
                    xhr.onload = function () {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 请求成功
                            console.log("文件上传成功");

                            // 添加包含上传图片的新卡片
                            addNewCard(imageUrl);
                        } else {
                            // 请求失败
                            console.error("文件上传失败");
                        }
                    };

                    // 发送 FormData 到后端
                    xhr.send(formData);
                });

                reader.readAsDataURL(selectedFile);
            }
        });

        // 触发文件选择对话框
        fileInput.click();
    });
});


function fetchImageList() {
    // 创建一个新的 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();

    // 配置请求
    xhr.open("GET", "/getImg", true);

    // 监听请求完成事件
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功
            let imageList = JSON.parse(xhr.responseText);

            // 根据获取的图片列表生成卡片并添加到页面
            imageList.forEach(function (imageUrl) {
                addNewCard(imageUrl);
            });
        } else {
            // 请求失败
            console.error("获取图片列表失败");
        }
    };

    // 发送 GET 请求到后端
    xhr.send();
}

function addNewCard(imageUrl) {
    // 创建一个新的图片元素，并设置其源
    let image = document.createElement("img");
    image.src = imageUrl;

    // 创建一个新的删除按钮元素
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "点击删除";
    deleteButton.addEventListener("click", function () {
        // 在这里添加删除图片的逻辑
        // 可以通过父元素或其他方式找到对应的卡片并删除
        deleteImage(imageUrl);
    });

    // 创建一个新的卡片元素
    let newCard = document.createElement("li");
    newCard.className = "card";

    // 设置卡片的背景图片，并追加图片元素和删除按钮
    newCard.style.backgroundImage = "url(" + imageUrl + ")";
    newCard.appendChild(image);
    newCard.appendChild(deleteButton);

    // 获取卡片列表
    let cardList = document.querySelector(".card-list");

    // 将新卡片插入到倒数第二个位置（假设最后一个是"新建卡片"按钮）
    let referenceCard = cardList.children[cardList.children.length - 1];
    cardList.insertBefore(newCard, referenceCard);
}
function deleteImage(imageUrl) {
    // 创建一个新的 XMLHttpRequest 对象
    let xhr = new XMLHttpRequest();
    xhr.setRequestHeader("Content-Type", "application/json");
    // 配置请求
    xhr.open("GET", "/deleteImg" , true);

    // 设置请求头（在某些情况下可能不需要）
    // xhr.setRequestHeader("Content-Type", "application/json");

    // 监听请求完成事件
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功
            console.log("图片删除成功");

            // 从页面中移除对应的卡片
            removeCard(imageUrl);
        } else {
            // 请求失败
            console.error("图片删除失败");
        }
    };
    // 发送 JSON 数据到后端
    xhr.send(JSON.stringify({ imageUrl: imageUrl }));

}

function removeCard(imageUrl) {
    // 获取卡片列表
    let cardList = document.querySelector(".card-list");

    // 找到包含指定图片的卡片
    let cards = cardList.querySelectorAll(".card");
    for (let i = 0; i < cards.length; i++) {
        let card = cards[i];
        if (card.style.backgroundImage === 'url("' + imageUrl + '")') {
            // 从列表中移除对应的卡片
            cardList.removeChild(card);
            break; // 找到并移除后退出循环
        }
    }
}